<template>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page.currentPage"
      :page-sizes="[5,10,20,50]"
      :page-size="page.pageSize"
      background
      layout="prev, pager,next,sizes, jumper"
      :total="counts">
    </el-pagination>
</template>

<script>
export default {
  props: {
    counts: {
      type: Number,
      required: true
    },
    page: {
      type: Object,
      default: () => ({
        currentPage: 1, // 当前页数
        pageSize: 5 // 每页显示数量
      })
    }
  },

  methods: {
    handleSizeChange (val) {
      this.page.pageSize = val
      this.$emit('changePageSize', val)
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.$emit('changeCurrentPage', val)
    }
  }
}
</script>

<style scoped lang='scss'>
.el-pagination{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
::v-deep .el-pagination__jump{
  margin-left: 0;
}
</style>
